{% extends "exams/base_exams.html" %}

{% block content %}

<script type="text/javascript" src="../../media/jquery.js"></script>
<link href="../../media/progress-polyfill/progress-polyfill.css" rel="stylesheet" />
<script src="../../media/progress-polyfill/progress-polyfill.js"></script>

<script type="text/javascript">

	var has_been_set = [];	
	
	function addToMeter(question) {
		var value = $("#mymeter").attr("value");
		var inc = 100 / $("h3").size();
		var result = true;

		if(has_been_set[question] != undefined) {
			return;
		}
		has_been_set[question] = 0;
		
		$("#mymeter").val(value+inc);
	}

	$(document).ready(function () {
		var has_been_set = [];	
		$(".question").children('.answer').each(function(i) { 
			if($(this).is(':checked') == true) {
				$(this).click();
			}
		});
	});
</script>

<h1>Exam name: '{{ exam.name }}'</h1>

<progress id="mymeter" max="100" value="0" id="progress1"></progress>

<script type="text/javascript">

</script>

{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

<form action="/exams/{{ exam.id }}/submit/" method="post">
{% csrf_token %}	
{% for question in exam.question_set.all %}
<div class="question">
	<h3>{{ question.text }}</h3>
	{% for answer in question.answer_set.all %}
    <input class="answer" type="radio" name="question_{{ question.id }}" id="answer{{ forloop.counter }}" value="{{ answer.id }}" onclick='addToMeter({{ question.id }}, {{ forloop.counter }})' />
    <label for="answer{{ forloop.counter }}">{{ answer.text }}</label><br /-->
	{% endfor %}	
</div>
{% endfor %}
<div>
<input type="submit" value="Submit" />
</div>
</form>
<a href="/exams/">Back to exams</a>

{% endblock %}

